import { Breadcrumb } from 'antd';
import { Link, useLocation, useIntl } from 'umi';

interface IRouters {
    path: string,
    breadcrumbName: string
}

const breadcrumb: React.FC = () => {
    let location = useLocation()
    let intl = useIntl()
    let routes: IRouters[] = location.pathname.split('/').filter((item:IRouters) => item).map((item:IRouters, index:number) => {
        return {
            path: `/${item}`,   
            breadcrumbName: item, 
            id: index
        }
    })
    function itemRender(route: IRouters, params: {}, routes: IRouters[], paths: string[]) {
      console.log(intl.formatMessage({ id: 'breadcrumb.' + route.breadcrumbName }))
        const last = routes.indexOf(route) === 0;
        return last ? (
            <span>{intl.formatMessage({ id: 'breadcrumb.' + route.breadcrumbName })}</span>
        ) : (
            <Link to={paths.splice(1).join('/')}>{intl.formatMessage({ id: 'breadcrumb.' + route.breadcrumbName })}</Link>
        );
    }
    return <Breadcrumb key='path' itemRender={itemRender} routes={routes} />
    // return <div>456</div>

}
export default breadcrumb